<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>全民快送</title>
    <!-- Bootstrap -->
    <link href="${base}/${resources}/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<#include "header.html"/>
<div class="container-fluid">
    <div id="deliveryInfoDiv">
        <form id="deliveryInfoForm" class="form-horizontal" role="form">
            <div class="form-group">
                <label for="pickUpTime" class="col-xs-3 col-sm-2 control-label">取货时间</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="datetime-local" class="form-control" name="pickUpTime" id="pickUpTime"/>
                </div>
            </div>
            <div class="form-group">
                <label for="type" class="col-xs-3 col-sm-2 control-label">物品类型</label>

                <div class="col-xs-8 col-sm-9">
                    <select class="form-control" id="type" name="type">
                        <#if types?? && types?size gt 0>
                            <#list types as t>
                                <option value="${t.tid}">${t.name}</option>
                            </#list>
                        </#if>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-3 col-sm-2 control-label">物品名称</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="text" class="form-control" name="name" id="name"/>
                </div>
            </div>
            <div class="form-group">
                <label for="weight" class="col-xs-3 col-sm-2 control-label">物品重量</label>

                <div class="col-xs-8 col-sm-9">
                    <div class="input-group">
                        <input type="number" class="form-control" name="weight" id="weight"/>

                        <div class="input-group-addon">千克</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="price" class="col-xs-3 col-sm-2 control-label">物品价值</label>

                <div class="col-xs-8 col-sm-9">
                    <div class="input-group">
                        <div class="input-group-addon">￥</div>
                        <input type="number" class="form-control" name="price" id="price" placeholder=""/>

                        <div class="input-group-addon">元</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="sendPlace" class="col-xs-3 col-sm-2 control-label">发货地址</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="text" class="form-control" name="sendPlace" id="sendPlace"/>
                </div>
            </div>
            <div class="form-group">
                <label for="receivePlace" class="col-xs-3 col-sm-2 control-label">收货地址</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="text" class="form-control" name="receivePlace" id="receivePlace"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-3 col-sm-offset-2 col-xs-4 col-sm-2">
                    <button id="calFee" type="button" class="btn btn-info">算算费用</button>
                </div>
            </div>
        </form>
    </div>
    <div id="personInfoDiv" style="display: none">
        <!-- page 2 -->
        <form id="personInfoForm" class="form-horizontal" role="form">
            <div class="row">
                <div class="col-xs-6 center-block">
                    <div class="row">
                        <div class="col-xs-12">
                            <p class="h5 text-center">配送费用</p>
                        </div>
                    </div>
                    <div class="row ">
                        <div class="col-xs-12">
                            <p class="text-center text-primary" id="sendFee">￥10</p>
                            <input type="hidden" id="deliveryPrice" name="deliveryPrice">
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 center-block">
                    <div class="row">
                        <div class="col-xs-12">
                            <p class="h5 text-center">配送时间</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <p class="text-center text-primary" id="sendTime">大约1小时</p>
                            <input type="hidden" id="deliveryTime" name="deliveryTime">
                        </div>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <label for="addPrice" class="col-xs-3 col-sm-2 control-label">我要加价</label>

                <div class="col-xs-7 col-sm-8">
                    <input id="addPrice" class="form-control" type="range"  step="1" min="0" max="20" value="0">
                </div>
                <div class="col-xs-1 col-sm-1">
                    <output id="addPriceOutput" class="text-center">0</output>
                </div>

            </div>
            <div class="form-group">
                <label for="sender" class="col-xs-3 col-sm-2 control-label">发货人</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="text" class="form-control" id="sender"/>
                </div>
            </div>
            <div class="col-xs-12 column">
                <div class="form-group">
                    <label for="sendPhone" class="col-xs-3 col-sm-2 control-label">手机号码</label>

                    <div class="col-xs-8 col-sm-9">
                        <input type="tel" class="form-control" id="sendPhone"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="receiver" class="col-xs-3 col-sm-2 control-label">收货人</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="text" class="form-control" id="receiver"/>
                </div>
            </div>
            <div class="form-group">
                <label for="receivePhone" class="col-xs-3 col-sm-2 control-label">手机号码</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="tel" class="form-control" id="receivePhone"/>
                </div>
            </div>
            <div class="form-group">
                <label for="idCard" class="col-xs-3 col-sm-2 control-label">身份证号</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="number" class="form-control" id="idCard"/>
                </div>
            </div>
            <div class="form-group">
                <label for="remark" class="col-xs-3 col-sm-2 control-label">重要说明</label>

                <div class="col-xs-8 col-sm-9">
                    <input type="text" class="form-control" id="remark" placeholder="请输入文字说明">
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-offset-3 col-sm-offset-2 col-xs-4 col-sm-2">
                    <button id="publishDelivery" type="button" class="btn btn-info">立即发布</button>
                </div>
            </div>
        </form>


    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${base}/${resources}/js/jquery-2.0.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${base}/${resources}/js/bootstrap.min.js"></script>
<script src="${base}/${resources}/js/jquery.validate.min.js"></script>
<script src="${base}/${resources}/js/jquery.json-2.4.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        var uid = ${uid}
        $("#navTitle").text("我要发货");
        //显示page1
        $("#deliveryInfoDiv").show();
        $("#personInfoDiv").hide();

        $("#calFee").click(function () {
            var form = $('#deliveryInfoForm');
            form.validate();
            if (form.valid()) {

                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "${base}/calFee",
                    data: $.toJSON({"sendPlace": $("#sendPlace").val(), "receivePlace": $("#receivePlace").val()}),
                    success: function (data) {

                        //计算成功
                        if (data.resultCode == 0) {
                            $("#sendFee").text("￥" + data.sendFee);
                            $("#deliveryPrice").val(data.sendFee);
                            $("#sendTime").text("大约" + data.sendTime/60 + "分钟");
                            $("#deliveryTime").val(data.sendTime);
                            $("#personInfoDiv").show();
                            $("#deliveryInfoDiv").hide();
                        } else {//计算失败

                            alert(data.resultMsg);
                        }

                    },
                    dataType: "json"
                });
            }
        });

        $("#publishDelivery").click(function(){

            var form = $('#deliveryInfoForm');
            form.validate();
            if (form.valid()) {

                // TODO 微信支付
                $.ajax({
                    type:"POST",
                    contentType:"application/json;charset=utf-8",
                    url: "${base}/publish",
                    data: $.toJSON({"uid":uid,"pickUpTime": $("#pickUpTime").val(), "name": $("#name").val(),
                        "type": $("#type").val(), "weight": $("#weight").val(),
                        "price": $("#price").val(), "deliveryPrice": $("#deliveryPrice").val(),
                        "deliveryTime":$("#deliveryTime").val(),"addPrice":$("#addPrice").val(),
                        "addPrice": $("#addPrice").val(), "sendPlace": $("#sendPlace").val(),
                        "receivePlace": $("#receivePlace").val(), "sendPhone": $("#sendPhone").val(),
                        "receivePhone": $("#receivePhone").val(), "sender": $("#sender").val(),
                        "receiver": $("#receiver").val(), "idCard": $("#idCard").val(),
                        "remark":$("#remark").val()

                    }),
                    success: function (data) {

                        //提交成功
                        if (data.resultCode == 0) {
                            if(confirm(data.resultMsg)){
                                window.location.href = "${base}/delivery";
                            }

                        } else {//计算失败
                            alert(data.resultMsg);
                        }

                    },
                    dataType: "json"
                });
            }

        });

        // add price
        $("#addPrice").change(function () {
            $("#addPriceOutput").val($("#addPrice").val());
        });

        //校验
        $("#deliveryInfoForm").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: true,
            rules: {
                pickUpTime: {
                    required: true
                },
                name: {
                    required: true,
                    maxlength: 255
                },
                type: {
                    required: true
                },
                weight: {
                    required: true,
                    min: 0
                },
                price: {
                    required: true,
                    min: 0
                },
                sendPlace: {
                    required: true,
                    maxlength: 255
                },
                receivePlace: {
                    required: true,
                    maxlength: 255
                }
            },

            messages: {
                pickUpTime: {
                    required: "请选择发货时间",
                    format: "发货时间格式不对"
                },
                name: {
                    required: "请输入物品名称",
                    maxlength: "物品名称不能超过255个字符"
                },
                type: {
                    required: "请选择物品类型"
                },
                weight: {
                    required: "请输入物品重量",
                    min: "物品重量必需大于0千克"
                },
                price: {
                    required: "请输入物品价值",
                    min: "物品价值必需大于0元"
                },
                sendPlace: {
                    required: "请输入发货地址",
                    maxlength: "发货地址不能超过255个字符"
                },
                receivePlace: {
                    required: "请输入收货地址",
                    maxlength: "收货地址不能超过255个字符"
                }
            },

            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },

            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                $(e).remove();
            },

            submitHandler: function (form) {

            },
            invalidHandler: function (form) {

            }
        });

        $("#personInfoForm").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: true,
            rules: {
                addPrice: {
                    required: true
                },
                sender: {
                    required: true,
                    maxlength: 255
                },
                sendPhone: {
                    required: true
                },
                receiver: {
                    required: true,
                    min: 0
                },
                receivePhone: {
                    required: true,
                    min: 0
                },
                idCard: {
                    required: true,
                    maxlength: 255
                },
                remark: {
                    maxlength: 255
                }
            },

            messages: {
                addPrice: {
                    required: "请选择发货时间",
                    format: "发货时间格式不对"
                },
                sender: {
                    required: "请输入发货人",
                    maxlength: "发货人不能超过255个字符"
                },
                sendPhone: {
                    required: "请选择发货人手机号码"
                },
                receiver: {
                    required: "请输入收货人",
                    maxlength: "收货人不能超过255个字符"
                },
                receivePhone: {
                    required: "请选择发货人手机号码"
                },
                idCard: {
                    required: "请输入发货人身份证号"
                },
                remark: {
                    maxlength: "重要说明不能超过255个字符"
                }
            },

            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },

            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                $(e).remove();
            },

            submitHandler: function (form) {

            },
            invalidHandler: function (form) {

            }
        });



    });

</script>

<script type="text/javascript">

    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '${appId}', // 必填，公众号的唯一标识
        timestamp:'${timestamp}', // 必填，生成签名的时间戳
        nonceStr: '${nonceStr}', // 必填，生成签名的随机串
        signature: '${signature}',// 必填，签名，见附录1
        jsApiList: [getLocation] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
        // 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
        // 则可以直接调用，不需要放在ready函数中。
        wx.getLocation({
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                var ak = '${ak}';
                $.getJSON("http://api.map.baidu.com/geocoder/v2/?ak="+ak+"&coordtype=wgs84ll&location="+latitude+","+longitude+"&output=json",
                        function(data){
                            if(data.status == 0){
                                $("#sendPlace").val(data.result.formatted_address);
                            }else{
                                alert("data.status: "+data.status);
                            }
                        });

            }
        });
    });

    wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
        // 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });






</script>
</body>
</html>